<template>
	<view class="settled_page">
		<u-navbar fixed placeholder bgColor="#F3F3F3">
			<template #left>
				<text class="nav_title">舒城旅游商户登记</text>
			</template>
		</u-navbar>
		<scroll-view scroll-y class="content" :style="{ height: `calc(100% - ${navBarHeight}px)` }">
      <image src="@/static/img/settled/settled_bg.png" class="settled_bg"></image>
			<view class="image_box_list">
        <view class="image_box">
          <image class="report_img" src="@/static/img/settled/report_shop.png" mode="widthFix"></image>
          <view class="title_box">
            <view class="title">商户登记</view>
            <view class="desc">舒城旅游商户登记</view>
          </view>
          <view class="process_box">
            <view class="process">
              <div class="dashed"></div>
              <view class="left">
                <image class="icon" src="@/static/img/settled/file_icon.png" mode="widthFix"></image>
                <view class="detail">
                  <text>完善资料</text>
                  <text>店铺资质照片</text>
                </view>
              </view>
              <view class="right">
                <image class="icon" src="@/static/img/settled/open_icon.png" mode="widthFix"></image>
                <view class="detail">
                  <text>入驻开店</text>
                  <text>高效审核 即可开通</text>
                </view>
              </view>
            </view>
            <view class="btn" @click="toSettled">立即入驻</view>
          </view>
        </view>
        <view class="image_box">
          <image class="report_img" src="@/static/img/settled/report_data.png" mode="widthFix"></image>
          <view class="title_box">
            <view class="title">数据上报</view>
            <view class="desc">商户经营每日信息登记</view>
          </view>
          <view class="process_box">
            <view class="btn data_btn" @click="toReport">经营信息上报</view>
          </view>
        </view>
      </view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		computed: {
      navBarHeight () {
        const platform = uni.getSystemInfoSync().platform
        const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
        let navHeight = 0
        if (['ios', 'devtools'].includes(platform)) {
          navHeight = 44
        } else {
          navHeight = 48
        }
        return navHeight + statusBarHeight
      }
		},
		methods: {
      toSettled () {
        uni.navigateTo({
          url: '/pages/shop/shopAdd'
        })
      },
      toReport () {
        uni.navigateTo({
          url: '/pages/settled/report'
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.settled_page {
		width: 100vw;
		height: 100vh;
		background-color: #F3F3F3;

		.nav_title {
			font-size: 36rpx;
			font-weight: 400;
			color: #000000;
		}

		.content {
      display: flex;
      flex-direction: column;
      position: relative;
      .settled_bg {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
			.image_box_list {
        box-sizing: border-box;
        padding: 8rpx 24rpx;
        width: 100%;
        .image_box {
          position: relative;
          display: flex;
          flex-direction: column;
          margin-bottom: 32rpx;
          image {
            width: 100%
          }
          .report_img {
            position: absolute;
            z-index: 1;
          }
          .title_box {
            z-index: 2;
            width: 100%;
            margin: 60rpx 0 58rpx 24rpx;
            .title {
              font-size: 40rpx;
              font-weight: 500;
              color: #FFFFFF;
            }
            .desc {
              font-size: 28rpx;
              font-weight: 400;
              color: #FFFFFF;
              margin-top: 16rpx;
            }
          }
          .process_box {
            background-color: #fff;
            width: 100%;
            z-index: 2;
            border-radius: 16rpx;
            padding: 32rpx 24rpx;
            .process {
              display: flex;
              align-items: center;
              margin-bottom: 54rpx;
              position: relative;
              .dashed {
                position: absolute;
                border-top: 1px dashed #979797;
                height: 1px;
                top: 20rpx;
                left: 150rpx;
                right: 150rpx;
              }
              .left, .right {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              }
              .icon {
                width: 60rpx;
                height: 60rpx;
              }
              .detail {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                margin-top: 16rpx;
                text:first-child {
                  font-size: 32rpx;
                  font-weight: 500;
                  color: #333333;
                }
                text:last-child {
                  font-size: 24rpx;
                  font-weight: 400;
                  color: #666666;
                  margin-top: 10rpx;
                }
              }
            }
            .btn {
              height: 88rpx;
              background: linear-gradient(288deg, #279E93 25%, #0A8177 100%);
              border-radius: 100rpx;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 36rpx;
              font-weight: 400;
              color: #FFFFFF;
              margin: 0 24rpx;
            }
            .data_btn {
              background: linear-gradient(288deg, #F0B643 25%, #F1BC0B 100%);
            }
          }
        }
      }
		}
	}
</style>
